<script setup>
import { ref, onMounted } from "vue";
import {
  homeDataSend,
  hotDataSend,
  goodsDataSend,
  specialDataSend,
} from "@/api/home";
import titleComponent from "!/title-component.vue";
import goodsBox from "./components/goods-box.vue";
const data = ref("");
const hot = ref([]);
const goods = ref([]);
const special = ref([]);
const is = ref(false);
const hove = ref("");
const childContent = ref([]);

const initData = async () => {
  const allData = await homeDataSend();
  data.value = allData.result;
};
const initHot = async () => {
  const data = await hotDataSend();
  hot.value = data.result;
};
const initGoods = async () => {
  const data = await goodsDataSend();
  goods.value = data.result;
};
const initSpecial = async () => {
  const data = await specialDataSend();
  special.value = data.result;
  console.log(data);
};

initData();
initHot();
initGoods();
initSpecial();
onMounted(() => {});

const hoveContent = (i) => {
  if (!isNaN(i)) {
    hove.value = i;
    childContent.value = data.value.categoryBanners[i].goods;
  }

  is.value = true;
};

const hoveContentOut = (e) => {
  is.value = false;
};
</script>

<template>
  <div class="home">
    <div class="home-content-center">
      <div class="home-carousel">
        <el-carousel height="550px">
          <el-carousel-item v-for="item in data.imageBanners" :key="item.id">
            <el-skeleton style="width: 100%;height:100%"  :loading="!item.imgUrl" animated>
              <template #template>
                <el-skeleton-item
                  variant="image"
                  style="width: 100%; height: 100%"
                />
              </template>
              <template #default>
                <img class="home-carousel-image" :src="item.imgUrl" alt="" />
              </template>
            </el-skeleton>
          </el-carousel-item>
        </el-carousel>

        <div class="home-goods-box">
          <div class="goods-directory">
            <div
              class="goods-directory-item"
              v-for="(item, i) in data.categoryBanners"
              :key="item.id"
              @mouseover="hoveContent(i)"
              @mouseout="hoveContentOut"
            >
              <div class="goods-directory-item-title">
                <h6>{{ item.name }}</h6>
                <span v-for="i in item.children.slice(0, 2)" :key="i.id">{{
                  i.name
                }}</span>
              </div>
              <div class="goods-directory-item-icon">
                <!-- <img :src="item.picture" alt=""> -->
                <!-- <img src="" alt="" /> -->
              </div>
            </div>
          </div>
          <div
            class="goods-content"
            :style="{ width: is ? '80%' : '0' }"
            @mouseover="hoveContent"
            @mouseout="hoveContentOut"
          >
            <div class="goods-content-nav">
              分类推荐<span>根据您的购买或浏览记录推荐</span>
            </div>
            <div class="goods-content-main">
              <div
                class="goods-content-item"
                v-for="item in childContent"
                :key="item.id"
              >
                <div class="goods-content-item-image">
                  <img :src="item.picture" alt="" />
                </div>
                <div class="goods-content-item-text">
                  <div :style="{ whiteSpace: is ? 'pre-wrap' : 'nowrap' }">
                    {{ item.name }}
                  </div>
                  <p style="color: #bbb">{{ item.desc }}</p>
                  <p style="color: #f04844">{{ "¥" + item.price }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="classif">
        <div class="fresh-goods">
          <title-component
            title="新鲜好物"
            subtitle="新鲜出炉 品质靠谱"
          ></title-component>
          <div class="fresh-goods-child home-goods-child">
            <goods-box
              class="fresh-goods-item home-goods-item"
              v-for="item in data.freshGoods"
              :key="item.id"
              text="新品"
              bg="#e36844"
            >
              <img :src="item.picture" alt="" />
              <div class="fresh-goods-text home-goods-text">
                <div class="home-goods-text-title">{{ item.name }}</div>
                <p style="color: #aaa">{{ item.desc }}</p>
                <p style="color: #e36844">{{ "¥" + item.price }}</p>
              </div>
            </goods-box>
          </div>
        </div>

        <div class="sentiment-hot">
          <title-component
            title="人气推荐"
            subtitle="人气爆款 不容错过"
          ></title-component>
          <div class="sentiment-hot-child home-goods-child">
            <goods-box
              class="sentiment-hot-item home-goods-item"
              v-for="item in hot"
              :key="item.id"
            >
              <img :src="item.picture" alt="" />
              <div class="sentiment-hot-text home-goods-text">
                <div class="home-goods-text-title" style="color: #fff">
                  {{ item.title }}
                </div>
                <p style="color: #eee">{{ item.alt }}</p>
              </div>
            </goods-box>
          </div>
        </div>

        <div class="popular-brands">
          <title-component
            title="热门品牌"
            subtitle="国际经典 品质保证"
          ></title-component>
          <div class="popular-brands-child home-goods-child">
            <goods-box
              class="popular-brands-item home-goods-item"
              v-for="item in data.hotBrands"
              :key="item.id"
              text="大牌"
              bg="#f19736"
            >
              <img :src="item.picture" alt="" />
              <div class="popular-brands-text home-goods-text">
                <div style="color: #fff">{{ item.name }}</div>
                <p style="color: #eee">{{ item.place }}</p>
              </div>
            </goods-box>
          </div>
        </div>

        <div class="products-block" v-for="item in goods" :key="item.id">
          <title-component
            :title="item.name"
            :tag="item.children"
            v-if="item.goods.length"
          ></title-component>
          <div class="products-block-child home-goods-child">
            <goods-box
              class="products-block-item home-goods-item"
              v-for="good in item.goods"
              :key="good.id"
              :text="item.saleInfo"
              bg="#e36844"
            >
              <img :src="good.picture" alt="" />
              <div class="products-block-text home-goods-text">
                <div class="home-goods-text-title">{{ item.name }}</div>
                <p style="color: #aaa">{{ good.desc }}</p>
                <p style="color: #e36844">{{ "¥" + good.price }}</p>
              </div>
              <div class="find-similar">
                <div style="font-size: 20px">找相似</div>
                <div>- - - - - - - - -</div>
                <p style="color: #ffb766">发现更多宝贝 ></p>
              </div>
            </goods-box>
          </div>
        </div>

        <div class="new-special">
          <title-component
            title="新鲜好物"
            subtitle="新鲜出炉 品质靠谱"
          ></title-component>
          <div class="new-special-child home-goods-child">
            <goods-box
              class="new-special-item home-goods-item"
              v-for="item in special"
              :key="item.id"
              text="新品"
              bg="#e36844"
            >
              <img :src="item.cover" alt="" />
              <div class="new-special-text home-goods-text">
                <div class="new-special-text-title">
                  <div>{{ item.title }}</div>
                  <p style="color: #aaa">{{ item.summary }}</p>
                </div>
                <p style="color: #e36844">{{ item.lowestPrice + "起" }}</p>
              </div>

              <div class="new-special-viewnum">
                <span>{{ item.viewNum }}</span>
                <span>{{ item.collectNum }}</span>
              </div>
            </goods-box>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.home {
  background-color: #fff;

  .home-content-center {
    width: 80%;
    margin: 0 auto;

    .el-carousel__arrow.el-carousel__arrow--left {
      left: 23%;
    }

    .home-carousel {
      $carousel-height: 550;
      position: relative;
      height: $carousel-height + px;
      .home-carousel-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      // .home-goods-box {
      //   position: absolute;
      //   left: 0;
      //   top: 0;
      //   width: 100%;
      //   height: 100%;

      //   // &:hover{
      //   //     width: 100%;
      //   //   }

      //   &:hover .goods-content{
      //     // left: 20%;
      //     width: 80%;
      //   }

      .goods-directory {
        box-sizing: border-box;
        position: absolute;
        left: 0;
        top: 0;
        width: 20%;
        height: 100%;

        background-color: rgba(154, 146, 146, 0.508);
        backdrop-filter: blur(5px);
        display: flex;
        flex-direction: column;
        align-content: space-around;
        .goods-directory-item {
          padding: 0 15px;
          // flex-grow: 1;
          height: calc($carousel-height / 9) + px;
          line-height: calc($carousel-height / 9) + px;
          display: flex;
          justify-content: space-between;

          .goods-directory-item-title {
            h6 {
              display: inline-block;
              color: #fff;
            }
            span {
              margin-left: 5px;
              color: #eee;
            }
          }

          .goods-directory-item-icon {
            img {
              width: 25px;
              height: 25px;
            }
          }
        }
      }

      .goods-content {
        box-sizing: border-box;
        position: absolute;
        left: 20%;
        top: 0;
        width: 80%;
        height: 100%;
        transition: all 0.5s;
        background-color: rgba(255, 255, 255, 0.4);
        backdrop-filter: blur(5px);
        overflow: hidden;
        white-space: nowrap;
        .goods-content-nav {
          padding: 20px 20px 0 20px;
          font-size: 16px;

          span {
            font-size: 12px;
            margin-left: 10px;
          }
        }
        .goods-content-main {
          display: grid;
          width: calc(100% - 60px);
          // height: 155px;
          padding: 20px;
          grid-template-columns: 33.33% 33.33% 33.33%;
          gap: 10px 10px;
          .goods-content-item {
            display: flex;
            align-items: center;
            background-color: #fff;

            .goods-content-item-image {
              width: 30%;
              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
              }
            }
            .goods-content-item-text {
              width: 70%;
              padding: 10px;
              div {
                width: 100%;
                font-size: 13px;
                padding: 10px 0;
                white-space: pre-wrap;
              }

              p {
                width: 100%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                padding: 10px 0;
              }
            }
          }
        }
      }
      // }
    }

    .classif {
      margin: 20px 0;
      .home-goods-child {
        display: grid;
        grid-template-columns: repeat(4, calc((100% - 50px * 3) / 4));
        gap: 50px;
        // justify-content: space-between;

        .home-goods-item {
          width: 100%;

          img {
            width: 100%;
          }

          transition: all 0.5s;
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1),
            0 6px 20px 0 rgba(0, 0, 0, 0.1);
          &:hover {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
              0 6px 20px 0 rgba(0, 0, 0, 0.19);
            transform: scale(1.05, 1.05);
          }

          .home-goods-text {
            width: 100%;
            text-align: center;
            background-color: #f0f9f4;
            .home-goods-text-title {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              color: #333;
              font-size: 16px;
              padding: 5px 20px;
            }
            p {
              padding: 5px 0;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
      }

      .fresh-goods {
        .fresh-goods-child {
          display: flex;
          justify-content: space-between;
          .fresh-goods-item {
            width: 23%;
            img {
              width: 100%;
            }

            .fresh-goods-text {
              width: 100%;
              text-align: center;
              background-color: #f0f9f4;
              div {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                color: #333;
                font-size: 16px;
                padding: 5px 20px;
              }
              p {
                padding: 5px 0;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }

            transition: all 0.5s;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1),
              0 6px 20px 0 rgba(0, 0, 0, 0.1);
            &:hover {
              box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
                0 6px 20px 0 rgba(0, 0, 0, 0.19);
              transform: scale(1.05, 1.05);
            }
          }
        }
      }

      .sentiment-hot {
        .sentiment-hot-child {
          .sentiment-hot-text {
            position: absolute;
            top: 15%;
            width: 100%;
            text-align: center;
            background-color: transparent;
            text-shadow: 2px 2px 4px rgba($color: #000000, $alpha: 0.5);

            div {
              font-size: 20px;
            }

            font-size: 20px;
          }
        }
      }

      .popular-brands {
        .popular-brands-child {
          .popular-brands-text {
            position: absolute;
            top: 15%;
            width: 100%;
            text-align: center;
            background-color: transparent;
            text-shadow: 2px 2px 4px rgba($color: #000000, $alpha: 0.5);

            div {
              font-size: 20px;
            }

            font-size: 20px;
          }
        }
      }

      .products-block {
        .products-block-child {
          flex-wrap: wrap;

          .products-block-item {
            margin: 10px 0;

            .find-similar {
              position: absolute;
              left: 0;
              bottom: 0;
              width: 100%;
              height: 0;
              background-color: #e36844;
              color: #fff;
              text-align: center;
              transition: all 0.5s;
              overflow: hidden;
            }

            &:hover .find-similar {
              height: 70px;
              padding: 10px 0;
            }
          }
        }
      }

      .new-special {
        .new-special-child {
          display: flex;
          justify-content: space-between;
          .new-special-item {
            width: calc((100% - 8%) / 3);
            img {
              width: 100%;
            }

            .new-special-text {
              width: 100%;
              display: flex;
              align-items: center;
              text-align: left;
              background-color: #fff;

              .new-special-text-title {
                width: 80%;
                div {
                  padding: 5px 10px;
                  font-size: 18px;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
                p {
                  padding: 5px 10px;
                  font-size: 12px;
                }
              }
              p {
                font-size: 18px;
                text-align: center;
                flex-grow: 1;
              }
            }
            .new-special-viewnum {
              width: calc(100% - 20px);
              border-top: 1px solid #eee;
              padding: 10px;

              span {
                margin-right: 10px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
